<!DOCTYPE html>
<html>
<head>
	<style>
		/** This is just for coloring: */
		table { border: 1px solid #CC0; }
		td { border: 1px solid  #CCC; }

		table {
			width: 100%;
			table-layout: fixed;
		}

		#first {
			width: 300px;
		}
	</style>
</head>
<body>

<p>
This play with table-layout:fixed; and applying the width to colgroup or col element. Firefox only recongize the width if it is applied on col element!</p>
<p>
On a perfect browser, both tables should look the same</p>

<dl>
	<dt>colgroup</dt>
	<dd>300 px width is applied to the first colgroup element</dd>
</dl>
<div style="width: 400px;">
<table>
	<colgroup id="first" /></colgroup>
	<colgroup id="second"/></colgroup>
	<colgroup id="third" /></colgroup>
	<tr>
		<td>Very long?</td>
		<td>#</td>
		<td>$</td>
	</tr>
</table>
</div>

<dl>
	<dt>col</dt>
	<dd>Each colgroup has an additional col element. The first col element is applied the 300 px width</dd>
</dl>

<div style="width: 400px;">
<table>
	<colgroup><col id="first" /></colgroup>
	<colgroup><col id="second"/></colgroup>
	<colgroup><col id="third" /></colgroup>
	<tr>
		<td>Very long?</td>
		<td>#</td>
		<td>$</td>
	</tr>
</table>
</div>
